<script>
import Footer from '../components/Footer.vue';
import axios from 'axios'
import router from "@/router";
export default {
  name: 'Payment',
  data(){
    return{
      orderId:this.$route.query.orderId,
      orders:{
        business:{}
      },
      isShowDetailet:false,
    }
  },
  async created(){
    try {
      const token = sessionStorage.getItem('jwt')
      console.log(this.orderId)
      const response = await axios.get(`/orders/${this.orderId}`, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token.slice(1, -1)}` // 添加认证令牌
        }
      })
      this.orders = response.data.data;
      console.log(response);
    } catch (err) {
      console.error('获取订单信息失败:', err)
    }
  },
  mounted(){
    //先将当前url添加到history对象中
    history.pushState(null,null,document.URL);
    //popstate事件能够监听history对象的变化
    window.onpopstate=()=>{
      this.$router.push({path:'/index'});
    }
  },
  unmounted(){
    window.onpopstate=null;
  },
  methods: {
    detailetShow(){
      this.isShowDetailet=!this.isShowDetailet;
    },
    async pay(){
      try {
        const token = sessionStorage.getItem('jwt')
        const response = await axios.post( `/orders/orderState?id=${this.orderId}`, null
        ,{
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token.slice(1, -1)}` // 添加认证令牌
          }
        })
        if(response.status === 200 ||  response.status === 201) {
          router.go(-1);
        }
      } catch (err) {
        console.error('失败:', err)
      }
    }
  },
  components: {
    Footer,
  }
}
</script>

<template>
  <div class="wrapper">
    <!--header部分-->
    <header>
      <p>在线支付</p>
    </header>

    <!--订单信息部分-->
    <h3>订单信息：</h3>
    <div class="order-info">
      <p>
        {{orders.business.businessName}}
        <i class="fa fa-caret-down" @click="detailetShow"></i>
      </p>
      <p>&#165;{{orders.orderTotal}}</p>
    </div>

    <!--订单明细部分-->
    <ul class="order-detailed" v-show="isShowDetailet">
      <li v-for="item in orders.list">
        <p>{{item.food.foodName}} x {{item.quantity}}</p>
        <p>&#165;{{item.food.foodPrice*item.quantity}}</p>
      </li>
      <li>
        <p>配送费</p>
        <p>&#165;{{orders.business.deliveryPrice}}</p>
      </li>
    </ul>

    <!--支付方式部分-->
    <ul class="payment-type">
      <li>
        <img src="../assets/alipay.png" alt="" />
        <i class="fa fa-check-circle"></i>
      </li>
      <li>
        <img src="../assets/wechat.png" alt="" />
      </li>
    </ul>
    <div class="payment-button">
      <button @click="pay">确认支付</button>
    </div>

    <!--底部菜单部分-->
    <Footer></Footer>
  </div>
</template>

<style scoped>
/*总容器*/
.wrapper{
  width: 100%;
  height: 100%;
}

/*header*/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*订单信息部分*/
.wrapper h3{
  margin-top: 12vw;
  box-sizing: border-box;
  padding: 4vw 4vw 0;
  font-size: 4vw;
  font-weight: 300;
  color: #999;
}
.wrapper .order-info{
  box-sizing: border-box;
  padding: 4vw;
  font-size: 4vw;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .order-info p:last-child{
  color: orangered;
}

/*订单明细部分*/
.wrapper .order-detailed{
  width: 100%;
}
.wrapper .order-detailed li{
  box-sizing: border-box;
  padding: 1vw 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .order-detailed li p{
  font-size: 3vw;
  color: #666;
}

/*支付方式部分*/
.wrapper .payment-type{
  width: 100%;
}
.wrapper .payment-type li{
  width: 100%;
  box-sizing: border-box;
  padding: 4vw;
  display: flex;
  justify-content: space-between;
  align-items:center;
}
.wrapper .payment-type li img{
  width: 33vw;
  height: 8.9vw;
}
.wrapper .payment-type li .fa-check-circle{
  font-size: 5vw;
  color: #38CA73;
}
.wrapper .payment-button{
  width: 100%;
  box-sizing: border-box;
  padding: 4vw;
}
.wrapper .payment-button button{
  width: 100%;
  height: 10vw;
  border: none;
  /*去掉外轮廓线，控件去边框去这两个*/
  outline: none;
  border-radius: 4px;
  background-color: #38CA73;
  color: #fff;
}
</style>